<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="/element/css/index.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <script src="/element/js/vue.js"></script>
    <script src="/element/js/index.js"></script>
    <script src="/element/js/axios.js"></script>
    <script src="/element/js/app.js"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div id="app">

            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-primary" @click="save">保存</button>
                <button type="button" class="layui-btn layui-btn-normal" @click="add">增加</button>
                <button type="button" class="layui-btn layui-btn-danger" @click="del">删除</button>
            </div>

            <table class="layui-table" lay-size="sm">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>昵称</th>
                    <th>加入时间</th>
                    <th>签名</th>
                </tr>
                </thead>
                <tbody v-for="item in tableData">
                <tr>
                    <td><el-input v-model=item.tableName  placeholder="请输入标题" size="small" ></el-input></td>
                    <td>
                        <el-select  v-model=item.tableField placeholder="请选择活动区域"  size="small">
                            <el-option v-for="select in selectList"  :label=select.value :value=select.key></el-option>
                        </el-select>
                    </td>
                    <td><el-input  type="text" v-model=item.tableNote  size="small" ></el-input></td>
                </tr>
                </td>
                </tbody>
            </table>

        </div>

    </div>
</div>

<script>
    var Main = {
        data() {

            return {
                tableData: [{
                    tableName:"表民",
                    tableField:"字段",
                    tableNote:"备注"
                }],
                selectList:[
                    {key:"key1", value:"选项1"},
                    {key:"key2", value:"选项2"}
                ]
            }
        },
        created(){
            // api.GET('/note/page',{'page':1,'size':10,'keyword':this.keyword},(result)=> {
            //     this.tableData=result.data.records;
            //     this.total=result.data.total;
            // })
        },
        methods: {
            add(){
                let obj=this.gettable();
                this.tableData.push(obj)
            },
            save(){
                let str=JSON.stringify(this.tableData);
                this.$alert('这是一段内容:'+str, '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
            },
            gettable(){
                let obj={};
                obj.tableName="";
                obj.tableField="";
                obj.tableNote="";
                return obj;
            },
            del(){
                this.tableData.pop();
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>